<template>
  <div class="mark">
    <!-- <router-view></router-view> -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);line-height: 3;padding-left: 1em;">
      <el-breadcrumb-item>拼券广场</el-breadcrumb-item>
      <el-breadcrumb-item>我的报名</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="markPage">
      <div class="soulist">
        <el-select v-model="value" placeholder="活动名称">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="类型">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker v-model="value1" type="date" placeholder="开始日期">
        </el-date-picker>
        <el-date-picker v-model="value2" type="date" placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary">搜索</el-button>
        <el-button type="primary" plain @click='found'>创建拼券</el-button>
      </div>
      <div style="margin-bottom: .6rem;">
        <el-button type="primary" plain>我的报名</el-button>
        <el-button  type="success" plain>我的申请</el-button>
      </div>
      <div class="list-bs">
        <el-table :data="tableData" height="16.6667rem" border style="width: 100%;">
          <el-table-column prop="id" label="ID" width="100">
          </el-table-column>
          <el-table-column prop="name" label="活动名称" width="180">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="开始日期" width="150">
          </el-table-column>
          <el-table-column prop="date" label="结束日期" width="150">
          </el-table-column>
          <el-table-column prop="a" label="活动状态" width="130">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-button v-if="scope.row.a==1" size="mini" type="success" plain>正在进行</el-button>
                <el-button v-if="scope.row.a==2" size="mini" type="warning" plain>审核中</el-button>
                <el-button v-if="scope.row.a==3" size="mini" type="info" plain>草稿箱</el-button>
                <el-button v-if="scope.row.a==4" size="mini" type="danger" plain>已结束</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sdate" label="操作">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <ul v-if="scope.row.a==1" class="flex">
                  <li @click="handleEdit(scope.$index, scope.row)">停止发放</li>
                  <li>短信营销</li>
                  <li>微信海报</li>
                  <li>详情</li>
                </ul>
                <ul v-if="scope.row.a==2" separator-class="el-icon-arrow-right">
                  <li>撤销审核</li>
                </ul>
                <ul v-if="scope.row.a==3" separator-class="el-icon-arrow-right">
                  <li>编辑</li>
                </ul>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="12">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        a: 1,
        currentPage4: 1,
        value1: '',
        value2: '',
        options: [{
          // value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        tableData: [{
          id: '10001',
          a: '1',
          date: '2016-05-03',
          name: '七夕情人节活动',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10002',
          a: '2',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10003',
          a: '2',
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10004',
          date: '2016-05-01',
          name: '王小虎',
          a: '4',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10005',
          a: '2',
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10006',
          a: '4',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10007',
          a: '4',
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        , {
          id: '10006',
          a: '4',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10007',
          a: '4',
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10006',
          a: '2',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10007',
          a: '4',
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10006',
          a: '1',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10007',
          a: '4',
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
       }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      found() {
        this.$router.push({
          path: '/foundspell'
        })
      }
    },
  }
</script>

<style scoped>
  .mark {
    text-align: left;
  }

  .flex li {
    margin-right: 10px;
    cursor: pointer
  }

  .soulist {
    margin: 1.2121rem 0 .6rem 0;
  }

  .pages {
    text-align: center;
    padding-top: .9091rem;
  }

  .header_fd {
    padding: .4rem 0;
  }

  .chuanj {
    width: 15.1515rem;
  }
.el-select,.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 150px;
}
</style>
